<template>
	<view class="com-gap" :style="rootStyle"></view>
</template>

<script>
	export default {
		props: {
			width: {
				type: [String, Number],
				default: ''
			},
			height: {
				type: [String, Number],
				default: ''
			},
			color: {
				type: String,
				default: ''
			}
		},
		computed: {
			rootStyle () {
				return Object.assign({}, this.width ? {
					// #ifndef APP-NVUE
					height: '100%',
					// #endif
					width: this.pixelunit(this.width),
				} : {
					// #ifndef APP-NVUE
					width: '100%',
					// #endif
					height: this.pixelunit(this.height || 24),
				}, {
					'background-color': this.color
				}) 
			}
		},
		methods: {
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			}
		}
	}
</script>

<style>
</style>
